<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
import {
  IconifyIconOffline,
  IconifyIconOnline,
  FontIcon
} from "@/components/ReIcon";
import { getUserListAndChildrenByOrgId } from '@/api/user/user'
import { useUserStoreHook } from '@/store/modules/user'
import type { TreeInstance } from 'element-plus'
import { ref, reactive, watch, defineExpose, defineEmits } from 'vue'
import { ElTree } from 'element-plus'
import Check from '~icons/ep/check'
import School from '~icons/ep/school'
export type ModelValueType = string | string[] | null | undefined

export interface UserDropdownProps {
  modelValue: ModelValueType
  multiple?: boolean
  width?: string
}

const treeProps = {
  label: 'name',
  children: 'children',
  isLeaf: 'leaf',
  class: (org: TreeNodeData) => renderClass(org)
}

export interface Org {
  id: string
  type: 'user' | 'dept'
  avatar?: string
  name: string
  leaf: boolean
}
// 查询条件
const queryParams = reactive({
  realName: "",
  specialWorksStatus: "1",
  specialWorks: "1",
  orgId: useUserStoreHook().userInfo.orgId
});
const $props = withDefaults(defineProps<UserDropdownProps>(), {
  multiple: false,
  width: '30%'
})

const $emits = defineEmits<{
  (e: 'update:modelValue', modelValue: ModelValueType): void
  (e: 'onSelected', userInfo: object): void
}>()

const value = useVModel($props, 'modelValue', $emits)

const userOptions = ref<Org[]>([])
const userOrgOptions = ref<Org[]>([])
const orgTreeRef = ref<TreeInstance>()
const expandedKeys = ref<string[]>([])

const renderClass = (org: TreeNodeData): string | { [key: string]: boolean } => {
  const val = userOptions.value.find((e) => e.id === org.id)
  if (val) {
    return 'is-active'
  } else {
    return ''
  }
}
const firstChar = (name: string) => {
  if (!name) return ''; // 非空校验
  if (typeof name !== 'string') return ''; // 类型校验
  return name.charAt(0);
};
const onNodeClick = (data: Org) => {
  if (data.type !== 'user') return
  if ($props.multiple) {
    const index = userOptions.value.findIndex((e) => e.id === data.id)
    if (index === -1) {
      userOptions.value.push(data)
      userOptions.value.sort((a, b) => a.id.localeCompare(b.id))
    } else {
      userOptions.value.splice(index, 1)
    }
  } else {
    const index = userOptions.value.findIndex((e) => e.id === data.id)
    if (index === -1) {
      userOptions.value = [data]
    } else {
      userOptions.value.splice(index, 1)
    }
  }
}
const dialogVisible = ref(false)

watch(
  () => queryParams.realName,
  (val) => {
    orgTreeRef.value?.filter(val)
  }
)
const filterNode = (value: string, data: TreeNodeData): boolean => {
  if (!value) return true
  return data.name.includes(value)
}
const open = () => {
  dialogVisible.value = true
}
const onOpen = async () => {
  queryParams.orgId = useUserStoreHook().userInfo.orgId;
  getUserListAndChildrenByOrgId(queryParams).then((res) => {
    console.log('getUserListPages-res', res)
    if (res.success) {
      userOrgOptions.value = res.data.map((e) => {
        return {
          ...e,
          id: e.id,
          type: 'user',
          leaf: true,
        } as Org
      })
    }
  })
  // let userIds: string[] = []
  // if (Array.isArray(value.value)) {
  //   userIds.push(...value.value)
  // } else if (value.value) {
  //   userIds.push(value.value)
  // }
  // if (userIds.length > 0) {
  //   const { data } = await getUserListPages(userIds);
  //   if (data) {
  //     userOptions.value = data.list.map((user) => {
  //       return {
  //         ...user,
  //         id: user.id,
  //         type: 'user',
  //         leaf: true
  //       } as Org
  //     })
  //     userOptions.value.sort((a, b) => a.id.localeCompare(b.id))
  //   }
  // } else {
  //   userOptions.value = []
  // }
}
const handelConfirm = () => {
  if ($props.multiple) {
    value.value = userOptions.value.map((e) => e.id)
  } else {
    if (userOptions.value.length > 0) {
      value.value = userOptions.value[0].id
    } else {
      value.value = null
    }
  }
  dialogVisible.value = false
  $emits('onSelected', userOptions.value)
}
defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" @open="onOpen" align-center draggable title="选择用户" :width="width">
    <el-card shadow="never" class="org-card">
      <template #header>
        <el-input v-model="queryParams.realName" placeholder="输入关键字进行查询" :style="{ width: '100%' }" suffix-icon="search"
          clearable>
        </el-input>
      </template>
      <el-scrollbar tag="div" class="org-tree">
        <el-tree ref="orgTreeRef" node-key="id" :data="userOrgOptions" :default-expanded-keys="expandedKeys"
          :props="treeProps" :filter-node-method="filterNode" @node-click="onNodeClick">
          <template #default="{ data }">
            <div class="flex items-center justify-between w-full">
              <div class="flex items-center">
                <el-avatar v-if="data.type === 'user'" :size="25" :src="data.avatar">
                  {{ firstChar(data.realName || data.nickname || data.username) }}
                </el-avatar>
                <IconifyIconOffline v-else :icon="School" :size="16" />
                &nbsp;{{ data.realName || data.nickname || data.username }}
              </div>
              <IconifyIconOffline class="is-selected" :icon="Check" :size="16" />
            </div>
          </template>
        </el-tree>
      </el-scrollbar>
    </el-card>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep {
  .el-tree {
    --el-tree-node-content-height: 40px;

    .el-tree-node__content {
      border-radius: 8px;
      margin: 2px 0 2px 0;
    }

    .is-active {
      color: var(--el-color-primary);

      .is-selected {
        display: block;
      }
    }
  }
}

.el-card {
  background-color: transparent;

  :deep(.el-card__header) {
    padding: 10px !important;
  }

  :deep(.el-card__body) {
    padding: 0 !important;
  }
}

.org-tree {
  height: 270px;
  padding: 5px;
}

.is-selected {
  display: none;
  padding-right: 15px;
}
</style>
